<template>
  <view class="quotationlist">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <u-sticky bgColor="#fff">
		<div style="padding:24rpx;">
			<u-search placeholder="输入姓名/手机号/公司名称" v-model="keyword"  @search="search" :showAction="false"> </u-search>
		</div> 
		 <div style="width:60%;margin:0 auto">
		   <u-tabs :list="tabs" lineColor="#FF5E01" :activeStyle="{color: '#FF5E01'}" @click="changeTabs"
		     :scrollable="false" lineWidth="60"></u-tabs>
		 </div>
    </u-sticky>
	<div class="con-list-div" style="padding:0 32rpx">
		<div class="inquiry-list-item" v-for="(item,index) in list" :key="index">
			<div class="box-top">
				<div class="inquiry-item-top">{{item.userRealname}}<span style="padding-left:30rpx">{{item.mobile}}</span></div>
				<div class="item-cell-div">
					<div class="item-cell" >
						<div class="label">公司抬头：</div>
						<div class="text">{{item.companyName}}</div>
					</div>
					<div class="item-cell" style="margin-top:10rpx;">
						<div class="label">加入时间：</div>
						<div class="text"> {{item.createdAt}}</div>
					</div>
				</div>
			</div>
			<div class="box-bottom" style="border-top:1px solid #DEDEDE;margin-top:20rpx;padding-top:32rpx">
				<div class="item-bottom">
					<div class="item-bottom-con">
						<div class="bottom-right" style="text-align: center;">
							<div style="width:188rpx;display: inline-block;margin-right:20rpx;" v-if="item.checkState == 1" >
								<u-button text="解绑" shape="circle" plain size="small" v-if="item.checkState == 1" @click="jball(item)" ></u-button>
							</div>
							<div style="width:188rpx;display: inline-block;" v-if="item.checkState == 1" >
								<u-button text="管理" shape="circle" type="primary" size="small" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)"  @click="toInfo(item)"></u-button>
							</div>
							<div style="width:188rpx;display: inline-block;margin-right:20rpx;" v-if="item.checkState == 0">
								<u-button text="拒绝" shape="circle"  plain  size="small"   @click="setGl(item.relationId,2)"></u-button>
							</div>
							<div style="width:188rpx;display: inline-block;" v-if="item.checkState == 0">
								<u-button text="同意" shape="circle" type="primary" size="small" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)"  @click="setGl(item.relationId,1)"></u-button>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="padding-bottom:40rpx;">
	   <u-loadmore :status="status"></u-loadmore>
	</div>

  </view>
</template>

<script>
  import {
    subCompanyUser,
    setGlCompany,
	subDelAllCompany
  } from '@/config/api.js'

  export default {
	
    data() {
      return {
        tabs: [
			{key: '',name: '已审核'},
			{key: 0,name: '待审核'}, 
		],
        pageSize: 10,
        pageNum: 1,
		checkState:'',
        list: [],
        style: {
          width: '160rpx',
          marginRight: '10rpx'
        },
        style2: {
          width: '160rpx',
          background: '#ff9d02',
          border: 'none'
        },
		status: 'loadmore',
		count:0,
		keyword:''
      }
    },
    onShow() {
		this.clearData()
        this.getList()
    },
	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
    methods: {
		search(){
			this.clearData()
			this.getList()
		},
		setGl(relationId,type){
			let text = ''
			if(type == 3){
				text = '确定解除关联吗？' 
			}else if(type == 2){
				text = '确定拒绝关联申请吗？' 
			}else if(type == 1){
				text = '确定通过关联申请吗？' 
			}
			uni.showModal({
			  title: '提示',
			  content:text,
			  success: (res) => {
			    if (res.confirm) {
			      setGlCompany({
			        relationId: relationId,
					setType:type
			      }).then(() => {
			       this.clearData()
			       this.getList()
			      })
					  
			    } else if (res.cancel) {
			      console.log('用户点击取消');
			    }
			  }
			});
		},
				 
      //清除数据
      clearData(){
      		this.pageNum = 1;
      		this.list = [];
      		this.status = 'loadmore';
      		this.count = 0;
      },
      getList() {
	    this.status = 'loading';
		let data = { 
			pageSize: this.pageSize,
			pageNum: this.pageNum,
			keyword:this.keyword
		  };
		if(this.checkState === 0){
			data.checkState =  this.checkState
		};
        subCompanyUser(data).then(res => {
          this.list = this.list.concat(res.list ? res.list : [] );
          this.count = res.count;
		  if(this.list.length >= this.count) {
		  	this.status = 'nomore';
		  }else{
		  	this.status = 'loadmore';
		  }
        }).catch(()=>{
				this.status = 'loadmore';
		})
      },
	  
	  //去管理页面
      toInfo(row) {
        uni.navigateTo({
          url: "/pagesUser/user/subAccountInfo?userId=" + row.userId
        })
      },
     
	  //解绑全部公司
      jball(row) {
        uni.showModal({
          title: '提示',
          content: '是否确认解除绑定？',
          success: (res) => {
            if (res.confirm) {
              subDelAllCompany({
                userId: row.userId,
                companyId: row.companyId
              }).then(res => {
				this.clearData();
                this.getList()
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      changeTabs(e) {
        this.checkState = e.key;
		this.clearData();
        this.getList()
      },
    }
  }
</script>

<style lang="scss">
 @import '@/style/common.scss';
.quotationlist .con-list-div{
	    margin-top:32rpx;
  		.inquiry-list-item{
  			position: relative;
  			margin-bottom:30rpx;
			background: rgba(255,255,255,1);
			box-shadow: 0px 0px 10px rgba(0,17,52,0.09);
			border-radius: 18rpx;
			padding:32rpx;
  			.inquiry-state{
  				position: absolute;
  				right:0;
  				top:0;
  				z-index: 1;
  				width: 162rpx;
  				height: 75rpx;
  				background: #EFF5FF;
  				border-radius: 0px 18rpx 0px 18rpx;
  				text-align: center;
  				color: #FF5E01;
  				font-size:$m-font;
  				line-height: 75rpx;
  			}
  			.inquiry-state.grey{
  				color: #929292;
  				background: #DEDEDE;
  			}
  			.inquiry-state.yellow{
  				color: #FC9500;
  				background: #FFF4E5;
  			}
  			.box-top{
  				position: relative;
  				
  			}
			.box-mid{
				margin-top:20rpx;
				font-size:26rpx;
				color: #000;
				.mid-cell{
					margin-bottom:10rpx;
				}
				.mid-cell.flex-cell{
					@include flexbox(space-between,flex-start);
				}
			}
  		
  			.inquiry-item-top{
  				font-size: $m-font;
  				line-height: 40rpx;
  				color: #1E1E1E;
  				margin-top:10rpx;
  				position: relative;
  				font-weight: bold;
  				padding-right:180rpx;
  			}
  			
			
  			.item-attr{
  				padding:30rpx 0;
  				.attr-blur{
  					font-size: $s-font;
  					line-height: 34rpx;
  					color: #FF5E01;
  					border-radius: 22rpx;
  					background: #EFF5FF;
  					padding:4rpx 32rpx;
  					display: inline-block;
  					margin-right:20rpx;
  				}
  				.attr-yellow{
  					font-size: $s-font;
  					line-height: 34rpx;					
  					color: #FC9500;
  					border-radius: 22rpx;
  					background: #FFF4E5;
  					padding:4rpx 32rpx;
  					display: inline-block;
  				}
  			}
  			.item-cell-div{
				background: #F9F9F9;
				padding:20rpx;
				margin-top:28rpx;
				border-radius: 18rpx;
  				.item-cell{
  					font-size:24rpx;
					@include flexbox(flex-start,flex-start);
  					.label{
  						color:#929292;
						width:140rpx;
  					}
					.text{
						width:calc(100% - 140rpx)
					}
  				}
  			}
  			.item-line{
  				height:2rpx;
  				background: #DEDEDE;
  				width:100%;
  			}
  			.item-bottom{
  				position: relative;
  				.item-bottom-con{
  					@include flexbox(space-between,center);
  					flex-direction:row-reverse;
  					.bottom-left{
  						position: relative;
  						.small-txt{
  							color: #1E1E1E;
  							font-size:20rpx;
  						}
  						.big-txt{
  							font-size: 48rpx;
  							font-weight: bold;
  							color: #FF0000;
  						}
  					}
  				}
  			}
  		}
  	
  		  
  		  
  	}
  
</style>